316. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2021-05-13 09:09:07 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

316.1 Files compared

#LocationFileLast Modified
1/Applications/Ampps/www/Porto 3.2.2/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/web/css/source_navigation.less2016-10-17 09:59:14 +0000
2/Applications/Ampps/www/Porto v4.0.0/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/web/css/source_navigation.less2021-01-11 01:32:26 +0000

316.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged25654
Changed1534
Inserted16
Removed815

316.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

316.4 Active regular expressions

No regular expressions were active.

316.5 Comparison detail

1 // /** 1 // /**
2 //  * Copyright © 2015 Magento. All rights reserved. 2 //  * Copyright © 2015 Magento. All rights reserved.
3 //  * See COPYING.txt for license details. 3 //  * See COPYING.txt for license details.
4 //  */ 4 //  */
5  5 
6 // 6 //
7 //  Common 7 //  Common
8 //  _____________________________________________ 8 //  _____________________________________________
9  9 
10 & when (@media-common = true) { 10 & when (@media-common = true) {
11  11 
12     .panel.header { 12     .panel.header {
13         .links, 13         .links,
14         .switcher { 14         .switcher {
15             display: none; 15             display: none;
16         } 16         }
17     } 17     }
18  18 
19     .nav-toggle { 19     .nav-toggle {
20         .lib-icon-font( 20         .lib-icon-font(
21             @icon-menu, 21             @icon-menu,
22             @_icon-font-size: 25px, 22             @_icon-font-size: 20px,
23             @_icon-font-color: @header-icons-color, 23             @_icon-font-color: inherit,
24             @_icon-font-color-hover: @header-icons-color-hover 24             @_icon-font-color-hover: inherit
25         ); 25         );
26         .lib-icon-text-hide(); 26         .lib-icon-text-hide();
27         cursor: pointer; 27         cursor: pointer;
28         display: block; 28         display: block;
29         font-size: 0;    
30         float: left;    
31         line-height: 60px;    
32         margin-right: 20px; 29         margin-right: 20px;
33         position: relative; 30         position: relative;
34         z-index: 1; 31         z-index: 1;
    32         padding: 6.5px 10px 6.5px 1px;
    33         text-align: center;
    34         vertical-align: middle;
    35         margin: 8px .25rem 8px 0;
    36         line-height: 20px;
    37         border-radius: .25rem;
35     } 38     }
36 } 39 }
37  40 
38 // 41 //
39 //  Mobile 42 //  Mobile
40 //  _____________________________________________ 43 //  _____________________________________________
41  44 
42 @active-nav-indent: 54px; 45 @active-nav-indent: 54px;
43 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { 46 @media (max-width: 991px) {
44     .navigation { 47     .navigation {
45         .parent { 48         .parent {
46             .level-top { 49             .level-top {
47                 position: relative; 50                 position: relative;
48                 .lib-icon-font( 51                 .lib-icon-font(
49                 @_icon-font-content: @icon-down, 52                 @_icon-font-content: @icon-down,
50                 @_icon-font-size: 42px, 53                 @_icon-font-size: 42px,
51                 @_icon-font-position: after, 54                 @_icon-font-position: after,
52                 @_icon-font-display: block 55                 @_icon-font-display: block
53                 ); 56                 );
54                 color: #777; 57                 color: #777;
55                 &:after { 58                 &:after {
56                     position: absolute; 59                     position: absolute;
57                     right: 7px; 60                     right: 7px;
58                     top: -8px; 61                     top: -8px;
59                 } 62                 }
60                 &.ui-state-active { 63                 &.ui-state-active {
61                     .lib-icon-font-symbol( 64                     .lib-icon-font-symbol(
62                     @_icon-font-content: @icon-up, 65                     @_icon-font-content: @icon-up,
63                     @_icon-font-position: after 66                     @_icon-font-position: after
64                     ); 67                     );
65                 } 68                 }
66             } 69             }
67         } 70         }
68     } 71     }
69  72 
70     .nav-sections { 73     .nav-sections {
71         .lib-css(transition, left .3s, 1); 74         .lib-css(transition, left .3s, 1);
72         height: 100%; 75         height: 100%;
73         left: -80%; 76         left: -80%;
74         left: calc(~"-1 * (100% - @{active-nav-indent})"); 77         left: calc(~"-1 * (100% - @{active-nav-indent})");
75         overflow: auto; 78         overflow: auto;
76         position: fixed; 79         position: fixed;
77         top: 0; 80         top: 0;
78         width: 80%; 81         width: 80%;
79         width: calc(~"100% - @{active-nav-indent}"); 82         width: calc(~"100% - @{active-nav-indent}");
80          83 
81         background-color: @mobile_navigation__background; 84         background-color: @mobile_navigation__background;
82         .switcher { 85         .switcher {
83             border-bottom: 1px solid @mobile_navigation__border-color; 86             border-bottom: 1px solid @mobile_navigation__border-color;
84             font-size: 1.4rem;    
85             font-weight: 400; 87             font-weight: 400;
86             margin: 0; 88             margin: 0;
87             padding: 12px 20px; 89             padding: 12px 20px;
88             height: auto; 90             height: auto;
89             color: #777; 91             color: #777;
90                 
91             strong {    
92                 font-size: 13px;    
93             }    
94             .label { 92             .label {
95                 display: block; 93                 display: block;
96                 margin-bottom: @indent__xs; 94                 margin-bottom: @indent__xs;
97             } 95             }
98             &-trigger { 96             &-trigger {
99                 strong { 97                 strong {
100                     display: inline-block !important; 98                     display: inline-block !important;
101                     position: relative; 99                     position: relative;
102                 } 100                 }
103             } 101             }
104             &-dropdown { 102             &-dropdown {
105                 .lib-list-reset-styles(); 103                 .lib-list-reset-styles();
106                 padding: @indent__s 0; 104                 padding: @indent__s 0;
107             } 105             }
108         } 106         }
109  107 
110         .header.links { 108         .header.links {
111             .lib-list-reset-styles(); 109             .lib-list-reset-styles();
112             color: @mobile_navigation_submenu__font-color; 110             color: @mobile_navigation_submenu__font-color;
113             li { 111             li {
114                 border-bottom: 1px solid @mobile_navigation__border-color; 112                 border-bottom: 1px solid @mobile_navigation__border-color;
115                 font-size: 1.3rem;    
116                 margin: 0; 113                 margin: 0;
117                 &.greet.welcome { 114                 &.greet.welcome {
118                     font-weight: 400; 115                     font-weight: 400;
119                     padding: 12px 20px; 116                     padding: 12px 20px;
120                 } 117                 }
121             } 118             }
122             a, 119             a,
123             a:hover { 120             a:hover {
124                 .lib-css(color, @mobile_navigation__font-color); 121                 .lib-css(color, @mobile_navigation__font-color);
125                 .lib-css(text-decoration, @navigation-level0-item__text-decoration); 122                 .lib-css(text-decoration, @navigation-level0-item__text-decoration);
126                 display: block; 123                 display: block;
127                 font-weight: 400; 124                 font-weight: 400;
128                 padding: 12px 20px; 125                 padding: 12px 20px;
129             } 126             }
130             a:hover { 127             a:hover {
131                 color: @_link-color-hover !important; 128                 color: @_link-color-hover !important;
132             } 129             }
133         } 130         }
134     } 131     }
135  132 
136     .nav-before-open { 133     .nav-before-open {
137         height: 100%; 134         height: 100%;
138         width: 100%; 135         width: 100%;
139         .page-wrapper { 136         .page-wrapper {
140             .lib-css(transition, left .3s, 1); 137             .lib-css(transition, left .3s, 1);
141             height: 100%; 138             height: 100%;
142             left: 0; 139             left: 0;
143             overflow: hidden; 140             overflow: hidden;
144             position: relative; 141             position: relative;
145         } 142         }
146  143 
147         body { 144         body {
148             height: 100%; 145             height: 100%;
149             overflow: hidden; 146             overflow: hidden;
150             position: relative; 147             position: relative;
151             width: 100%; 148             width: 100%;
152         } 149         }
153     } 150     }
154  151 
155     .nav-open { 152     .nav-open {
156         .page-wrapper { 153         .page-wrapper {
157             left: 80%; 154             left: 80%;
158             left: calc(~"100% - @{active-nav-indent}"); 155             left: calc(~"100% - @{active-nav-indent}");
159             overflow: visible; 156             overflow: visible;
160         } 157         }
161  158 
162         .nav-sections { 159         .nav-sections {
163             @_shadow: 0 0 5px 0 rgba(50, 50, 50, .75); 160             @_shadow: 0 0 5px 0 rgba(50, 50, 50, .75);
164              161 
165             .lib-css(box-shadow, @_shadow, 1); 162             .lib-css(box-shadow, @_shadow, 1);
166             left: 0; 163             left: 0;
167             z-index: 99; 164             z-index: 99;
168         } 165         }
169  166 
170         .nav-toggle { 167         .nav-toggle {
171             &:after{ 168             &:after{
172                 background: rgba(0,0,0,.01); 169                 background: rgba(0,0,0,.01);
173                 content: ''; 170                 content: '';
174                 display: block; 171                 display: block;
175                 height: 100%; 172                 height: 100%;
176                 position: fixed; 173                 position: fixed;
177                 right:0; 174                 right:0;
178                 top: 0; 175                 top: 0;
179                 width: 100%; 176                 width: 100%;
180                 z-index: 1; 177                 z-index: 1;
181             } 178             }
182         } 179         }
183     } 180     }
184  181 
185     header.page-header .nav-sections { 182     header.page-header .nav-sections {
186         &-items { 183         &-items {
187             .lib-clearfix(); 184             .lib-clearfix();
188             position: relative; 185             position: relative;
189             z-index: 1; 186             z-index: 1;
190         } 187         }
191  188 
192         &-item-title { 189         &-item-title {
193             background: @mobile_navigation-tab__background; 190             background: @mobile_navigation-tab__background;
194             border: solid rgba(255,255,255,0.3); 191             border: solid rgba(255,255,255,0.3);
195             border-width: 0 0 1px 1px; 192             border-width: 0 0 1px 1px;
196             box-sizing: border-box; 193             box-sizing: border-box;
197             float: left; 194             float: left;
198             height: 71px; 195             height: 71px;
199             padding-top: 24px; 196             padding-top: 24px;
200             text-align: center; 197             text-align: center;
201             width: 33.33%; 198             width: 33.33%;
202              199 
203             &.active { 200             &.active {
204                 background: transparent; 201                 background: transparent;
205                 border-bottom: 0; 202                 border-bottom: 0;
206                  203 
207                 > a, > a:hover, > a:focus { 204                 > a, > a:hover, > a:focus {
208                     color: @mobile_navigation-tab-active__font-color; 205                     color: @mobile_navigation-tab-active__font-color;
209                 } 206                 }
210             } 207             }
211             > a, > a:hover, > a:focus { 208             > a, > a:hover, > a:focus {
212                 color: @mobile_navigation-tab__font-color; 209                 color: @mobile_navigation-tab__font-color;
213             } 210             }
214         } 211         }
215  212 
216         &-item-content { 213         &-item-content {
217             .lib-clearfix(); 214             .lib-clearfix();
218             box-sizing: border-box; 215             box-sizing: border-box;
219             float: right; 216             float: right;
220             margin-left: -100%; 217             margin-left: -100%;
221             margin-top: 71px; 218             margin-top: 71px;
222             width: 100%; 219             width: 100%;
223             &.active { 220             &.active {
224                 display: block; 221                 display: block;
225             } 222             }
226         } 223         }
227     } 224     }
228  225 
229     .lib-main-navigation( 226     .lib-main-navigation(
230         @_nav-background-color: transparent, 227         @_nav-background-color: transparent,
231         @_nav-level0-item-border: 1px solid @mobile_navigation__border-color, 228         @_nav-level0-item-border: 1px solid @mobile_navigation__border-color,
232         @_nav-level0-item-color: @mobile_navigation__font-color, 229         @_nav-level0-item-color: @mobile_navigation__font-color,
233         @_nav-level0-font-size: 13px, 230         @_nav-level0-font-size: 13px,
234         @_nav-level0-font-weight: 400, 231         @_nav-level0-font-weight: 400,
235         @_submenu-item-color: @mobile_navigation_submenu__font-color 232         @_submenu-item-color: @mobile_navigation_submenu__font-color
236     ); 233     );
237      234 
238     .navigation { 235     .navigation {
239         a { 236         a {
240             padding-top: 10px; 237             padding-top: 10px;
241             padding-bottom: 10px; 238             padding-bottom: 10px;
242              239 
243             &:hover { 240             &:hover {
244                 color: @_link-color-hover !important; 241                 color: @_link-color-hover !important;
245             } 242             }
246         } 243         }
247             
248         li.level0 { 244         li.level0 {
249             line-height: 16px; 245             line-height: 16px;
250                 
251             &:first-child { 246             &:first-child {
252                 border-top: 0; 247                 border-top: 0;
253             } 248             }
254             > a.level-top { 249             > a.level-top {
255                 padding: 13px 36px 13px 15px; 250                 padding: 13px 36px 13px 15px;
256             } 251             }
257             > a.ui-state-active { 252             > a.ui-state-active {
258                 color: #000; 253                 color: #000;
259                 font-weight: 600; 254                 font-weight: 600;
260                  255 
261                 &, & + .submenu { 256                 &, & + .submenu {
262                     background-color: @mobile_navigation_opened_submenu__background-color; 257                     background-color: @mobile_navigation_opened_submenu__background-color;
263                 } 258                 }
264             } 259             }
265             &.active .all-category .ui-state-focus, &.active > a:not(.ui-state-active), &.has-active > a:not(.ui-state-active), &.active > a:not(.ui-state-active) span:not(.ui-menu-icon), &.has-active > a:not(.ui-state-active) span:not(.ui-menu-icon) { 260             &.active .all-category .ui-state-focus, &.active > a:not(.ui-state-active), &.has-active > a:not(.ui-state-active), &.active > a:not(.ui-state-active) span:not(.ui-menu-icon), &.has-active > a:not(.ui-state-active) span:not(.ui-menu-icon) {
266                 border-left: 0; 261                 border-left: 0;
267                 margin-left: 0; 262                 margin-left: 0;
268             } 263             }
269              264 
270             > .ui-menu-item > a { 265             > .ui-menu-item > a {
271                 font-weight: 400; 266                 font-weight: 400;
272             } 267             }
273             .ui-menu-item > a:before { 268             .ui-menu-item > a:before {
274                 content: @icon-right-open; 269                 content: @icon-right-open;
275                 display: inline; 270                 display: inline;
276                 font-family: @icon-font-family; 271                 font-family: @icon-font-family;
277                 margin-right: 10px; 272                 margin-right: 10px;
278                 font-size: 16px; 273                 font-size: 16px;
279                 vertical-align: top; 274                 vertical-align: top;
280                 color: @mobile_navigation_opened_submenu-item_icon-color; 275                 color: @mobile_navigation_opened_submenu-item_icon-color;
281             } 276             }
282             ul.level0 > .level1 { 277             ul.level0 > .level1 {
283                 font-weight: 400; 278                 font-weight: 400;
284             } 279             }
285         } 280         }
286         ul.submenu { 281         ul.submenu {
287             &, &:not(:first-child) { 282             &, &:not(:first-child) {
288                 padding-left: 15px; 283                 padding-left: 15px;
289                  284 
290                 .active > a, .level1.active > a { 285                 .active > a, .level1.active > a {
291                     padding-left: 15px; 286                     padding-left: 15px;
292                     border: 0; 287                     border: 0;
293                     font-weight: 600; 288                     font-weight: 600;
294                 } 289                 }
295             } 290             }
296              291 
297             > li { 292             > li {
298                 line-height: 16px; 293                 line-height: 16px;
299             } 294             }
300         } 295         }
301     } 296     }
302 } 297 }
303  298 
304 // 299 //
305 //  Desktop 300 //  Desktop
306 //  _____________________________________________ 301 //  _____________________________________________
307  302 
308 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { 303 @media(min-width: 992px){
309     .nav-toggle { 304     .nav-toggle {
310         display: none; 305         display: none;
311     } 306     }
312  307 
313     .nav-sections { 308     .nav-sections {
314         .lib-vendor-prefix-flex-shrink(0); 309         .lib-vendor-prefix-flex-shrink(0);
315         .lib-vendor-prefix-flex-basis(auto); 310         .lib-vendor-prefix-flex-basis(auto);
316         &-item-title { 311         &-item-title {
317             display: none; 312             display: none;
318         } 313         }
319         &-item-content > * { 314         &-item-content > * {
320             display: none; 315             display: none;
321         } 316         }
322         &-item-content > .navigation { 317         &-item-content > .navigation {
323             display: block; 318             display: block;
324             z-index: 5; 319             z-index: 5;
325         } 320         }
326     } 321     }
327  322 
328     .lib-main-navigation-desktop( 323     .lib-main-navigation-desktop(
329         @_nav-level0-item__active__border-width: 0, 324         @_nav-level0-item__active__border-width: 0,
330         @_nav-level0-item-line-height: 46px, 325         @_nav-level0-item-line-height: 46px,
331         @_nav-font-size: 12px, 326         @_nav-font-size: 12px,
332         @_submenu-border-width: 0, 327         @_submenu-border-width: 0,
333         @_submenu-border-style: solid, 328         @_submenu-border-style: solid,
334         @_submenu-border-color: @theme-color, 329         @_submenu-border-color: @theme-color,
335         @_submenu-font-weight: 400, 330         @_submenu-font-weight: 400,
336         @_submenu-item-color: #777, 331         @_submenu-item-color: #777,
337         @_submenu-item-padding: 9px 5px, 332         @_submenu-item-padding: 9px 5px,
338         @_submenu-item__hover__background-color: #f4f4f4, 333         @_submenu-item__hover__background-color: #f4f4f4,
339         @_submenu-item-color-hover: #777 334         @_submenu-item-color-hover: #777
340     ); 335     );
341  336 
342     .panel.header { 337     .panel.header {
343         .links, 338         .links,
344         .switcher { 339         .switcher {
345             display: inline-block; 340             display: inline-block;
346             margin: 0; 341             margin: 0;
347             vertical-align: middle; 342             vertical-align: middle;
348         } 343         }
349         .switcher {    
350             height: 15px;    
351         }    
352     } 344     }
353      345 
354     .navigation li.level0 { 346     .navigation li.level0 {
355         border-radius: 5px;    
356         transition-delay: 0.3s; 347         transition-delay: 0.3s;
357         margin-right: 4px; 348         margin-right: 0;
358     } 349     }
359 } 350 }